<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
        .star .iconfont{
            padding-right: 4px;
            font-size: 30px;
            cursor: pointer;
        }
        .icon-collection-b{
            color: goldenrod;
        }
        .icon-collection{
            color: #999;
        }
    </style>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
</head>
<body>
    <div id="app">
        <h4>循环指令v-for</h4>
        <!-- 
        循环指令v-for根据可循环数据，完成指定标签的重复创建
            + v-for语法组成 ( in 和 of 只是关键字，功能没有区别 )
                v-for=" 临时变量 in 循环变量 "
                v-for=" 临时变量 of 循环变量 "
                v-for=" (临时变量1,临时变量2) in 循环变量 "
                v-for=" (临时变量1,临时变量2) of 循环变量 "
                v-for=" (临时变量1,临时变量2,临时变量3) in 循环变量 "
                v-for=" (临时变量1,临时变量2,临时变量3) of 循环变量 "
            + 循环变量
                => 取值规则等同于插值表达式
                => 有效循环数据只包含 Array Object Set String Number
            + 临时变量
                => 循环执行时，被循环数据对于的每次循环加载的或者读取到数据值
                => 该变量在循环范围内，等同于一个特殊仓库数据，功能类似data中的变量
        -->
        <ul>
            <li>{{ names[0] }}</li>
            <li>{{ names[1] }}</li>
            <li>{{ names[2] }}</li>
            <li>{{ names[3] }}</li>
        </ul>
        <br>
        <h5>数组循环</h5>
        <!-- 
            v-for=" item in Array "  item 是数组的元素值
            v-for=" (item,index) in Array "  item 是数组的元素值 index 元素对应的下标
         -->
        <input type="button" value="添加随机名称" @click="addNameItem()">
        <ul>
            <li v-for=" n in names ">
                {{ n }}
            </li>
        </ul>
        <ul>
            <li v-for=" (n,i) in names ">
                {{ n }}-{{ i }}
                <input type="button" value="删除" @click=" names.splice(i,1) ">
                <input type="button" value="删除" @click=" removeNameItem(i) ">
            </li>
        </ul>

        <h5>对象循环</h5>
        <!-- 
            v-for=" v in Object "  v 是对象属性的有效取值
            v-for=" (v,k) in Object "  v 是对象属性的有效取值  k 是对象属性的名字
            v-for=" (v,k,c) in Object "  v 是对象属性的有效取值  k 是对象属性的名字
                                         c 是循环指令为对象属性分配的从0开始的循环序号
        -->
        <ul>
            <li v-for=" value in user ">{{ value }}</li>
        </ul>
        <ul>
            <li v-for=" (value,key) in user ">{{ value }}-{{ key }}</li>
        </ul>
        <ul>
            <li v-for=" (value,key,c) in user ">{{ value }}-{{ key }}-{{ c }}</li>
        </ul>

        <h5>set集合循环</h5>
        <!-- 
            v-for=" item in Object "  item 是集合的元素取值
            v-for=" (item,c) in Object "  item 是集合的元素取值  c 为集合元素分配的从0开始的循环序号
        -->
        <input type="button" value="添加" @click="addNameSetItem()">
        <ul>
            <li v-for=" item in nameSet ">{{ item }}</li>
        </ul>
        <ul>
            <li v-for=" (item,c) in nameSet ">
                {{ item }}-{{ c }}
                <input type="button" value="删除" @click=" nameSet.delete(item) ">
                <input type="button" value="删除" @click=" removeNameSetItem(item) ">
            </li>
        </ul>

        <h5>String循环</h5>
        <ul>
            <li v-for=" char in str " >{{ char }}</li>
        </ul>
        <ul>
            <li v-for=" (char,i) in str " >{{ char }}-{{ i }}</li>
        </ul>

        <h5>Number</h5>
        <!-- 
            v-for=" arg1 in Number "  arg1 是1开始的循环累加值（循环次数）
            v-for=" (arg1,arg2) in Number "  arg1 是1开始的循环累加值（循环次数）  
                                             arg1 是0开始的循环累加值（循环次数）  
         -->
        <ul>
            <li v-for=" arg1 in num">{{ arg1 }}</li>
        </ul>
        <ul>
            <li v-for=" (arg1,arg2) in num">{{ arg1 }}-{{ arg2 }}</li>
        </ul>

        <div class="star">
            <span class="iconfont" :class=" c<=source?'icon-collection-b':'icon-collection' " v-for="c in 5"></span>
            <span style="padding-left: 16px;font-size:30px;">{{ source }}</span>
        </div>
        <input type="range" min="0" max="5" step="1" :value="source" @input=" source=$event.target.value ">
    </div>
    <script src="../assets/mock/mock-min.js"></script>
    <script type="module">
        // 加载 Vue3 的ESM 模块文件
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        createApp({
            data(){
                return {
                    names:["张三","李四","王二","小李"],
                    user:{
                        name:"张三",
                        age:23
                    },
                    nameSet:new Set(["张三","李四","王二","小李"]),
                    str:"abcdef",
                    num:5,
                    source:0
                }
            },
            methods:{
                removeNameItem(i){
                    this.names.splice(i,1)
                },
                addNameItem(){
                    this.names.push(Mock.mock("@cname"))
                },
                removeNameSetItem(item){
                    this.nameSet.delete(item)
                },
                addNameSetItem(){
                    this.nameSet.add(Mock.mock("@cname"))
                }
            }
        }).mount("#app")
    </script>
</body>
</html>